<template>
<div class='a'>
   <!-- Form -->

			<el-row class="row-bg">
				<el-col :span="6">
					<el-button type="primary" @click="tjkh()">添加客户</el-button>
				</el-col>
				<el-col :span="4" :offset="8">
					<el-input placeholder="请输入姓名或手机号" v-model="usertj" @change="ck()">
						<i slot="prefix" class="el-input__icon el-icon-search"></i>
					</el-input>
				</el-col>

			</el-row>

			<el-dialog title="添加客户" :visible.sync="dialogFormVisible">
				<el-form :model="form">
					<el-form-item label="客户编号" :label-width="formLabelWidth">
						<el-input v-model="form.userno" autocomplete="off" size="mini" :readonly="readon"></el-input>
					</el-form-item>
					<el-form-item label="*客户名称" :label-width="formLabelWidth">
						<el-input v-model="form.username" autocomplete="off" size="mini"></el-input>
					</el-form-item>
					<el-form-item label="*手机号" :label-width="formLabelWidth">
						<el-input v-model="form.userphone" autocomplete="off" size="mini"></el-input>
					</el-form-item>
					<el-form-item label="家庭住址" :label-width="formLabelWidth">
						<el-input v-model="form.useraddress" autocomplete="off" size="mini"></el-input>
					</el-form-item>
					<el-form-item label="客户额度" :label-width="formLabelWidth">
						<el-input v-model="form.uamount" autocomplete="off" size="mini"></el-input>
					</el-form-item>
					<el-form-item label="积分" :label-width="formLabelWidth">
						<el-input v-model="form.uintegral" autocomplete="off" size="mini"></el-input>
					</el-form-item>
					<el-form-item label="是否为会员" :label-width="formLabelWidth">
						<el-radio-group v-model="form.isvip">
							<el-radio :label="1" >是</el-radio>
							<el-radio :label="0" >否</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="备注" :label-width="formLabelWidth">
						<el-input type="textarea" v-model="form.usercomment" size="mini"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="ok()">确 定</el-button>
				</div>
			</el-dialog>

			<template>
				<el-table :data="ckulist" style="width:1300px" max-height="320" highlight-current-row @current-change="handleCurrentChange">
					<el-table-column width="80" label="#">
						<template slot-scope="temp">
							{{temp.$index+1}}
						</template>
					</el-table-column>
					<el-table-column prop="userno" label="客户编号" width="150">
					</el-table-column>
					<el-table-column prop="username" label="客户名称" width="150">
					</el-table-column>
					<el-table-column prop="userphone" label="手机号" width="150">
					</el-table-column>
					<el-table-column prop="usertime" label="创建时间" width="150">
					</el-table-column>
					<el-table-column prop="isvip" label="客户等级" width="150">
						<template slot-scope="temp">
							<span v-if="temp.row.isvip==0">普通用户</span>
							<span v-if="temp.row.isvip==1">会员用户</span>
						</template>
					</el-table-column>
					<el-table-column prop="uamount" label="客户额度" width="150">
					</el-table-column>
					<el-table-column prop="uintegral" label="积分" width="150">
					</el-table-column>
					<el-table-column prop="usercomment" label="备注" width="150">
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="150">
						<template slot-scope="scope">
							<el-button type="primary" icon="el-icon-edit" circle @click="modif(scope.row)"></el-button>
							<el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.userid)"></el-button>
						</template>

					</el-table-column>
				</el-table>
			</template>
			<br />
			<br />
			<br />
			<!--车辆查询 -->
            
            <el-tag type="">车辆信息</el-tag>
			<template>
				<el-table :data="cerlist" border style="width:1300px" >
					<el-table-column width="80" label="#">
						<template slot-scope="temp">
							{{temp.$index+1}}
						</template>
					</el-table-column>
					<el-table-column prop="userid" label="客户编号" width="180">
					</el-table-column>
					<el-table-column prop="resdriver" label="驾驶员" width="180">
					</el-table-column>
					<el-table-column prop="ulicense" label="车牌号码">
					</el-table-column>
					<el-table-column prop="vbrandname" label="车辆品牌">
					</el-table-column>
					<el-table-column prop="vtypename" label="车辆型号">
					</el-table-column>
					<el-table-column prop="driverphone" label="联系电话">
					</el-table-column>
					<el-table-column prop="affiliationname" label="车辆归属">
					</el-table-column>
					<el-table-column prop="umileage" label="里程(km)">
					</el-table-column>
					<el-table-column prop="registereddate" label="上牌日期">
					</el-table-column>
					<el-table-column prop="buydate" label="购买日期">
					</el-table-column>
				</el-table>
			</template>

			<el-dialog title="修改信息" :visible.sync="dialogTableVisible">
				<el-form :model="xguser">
					<el-form-item label="客户编号" :label-width="formLabelWidth">
						<el-input v-model="xguser.userno" autocomplete="off" size="mini" :readonly="readon"></el-input>
					</el-form-item>
					<el-form-item label="客户名称" :label-width="formLabelWidth">
						<el-input v-model="xguser.username" autocomplete="off" size="mini"></el-input>
					</el-form-item>
					<el-form-item label="手机号" :label-width="formLabelWidth">
						<el-input v-model="xguser.userphone" autocomplete="off" size="mini"></el-input>
					</el-form-item>
					<el-form-item label="家庭住址" :label-width="formLabelWidth">
						<el-input v-model="xguser.useraddress" autocomplete="off" size="mini"></el-input>
					</el-form-item>
					<el-form-item label="客户额度" :label-width="formLabelWidth">
						<el-input v-model="xguser.uamount" autocomplete="off" size="mini"></el-input>
					</el-form-item>
					<el-form-item label="积分" :label-width="formLabelWidth">
						<el-input v-model="xguser.uintegral" autocomplete="off" size="mini"></el-input>
					</el-form-item>
					<el-form-item label="是否为会员" :label-width="formLabelWidth">
						<el-radio-group v-model="xguser.isvip">
							<el-radio :label="1">是</el-radio>
							<el-radio :label="0">否</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="备注" :label-width="formLabelWidth">
						<el-input type="textarea" v-model="xguser.usercomment" size="mini"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogTableVisible = false">取 消</el-button>
					<el-button type="primary" @click="xgok()">确 定</el-button>
				</div>
			</el-dialog>
</div>
</template>

<script>
export default {
data() {
//这里存放数据
return {
dialogTableVisible: false,
				dialogFormVisible: false,
				form: {
					userno: "",
					username: "",
					userphone: "",
					useraddress: "",
					uamount: "",
					uintegral: "",
					isvip:0,
					usercomment: "",
					userid: "0",
					armemberid: "0",
					arvehiclekm: "0",
					signupaddress: "株洲市石峰区九郎山4s店",
					usertime: ""
				},
				formLabelWidth: '100px',
				ckulist: [],
				usertj: "",
				currentRow: "",
				cerlist:[],
				xguser:{},
				readon:true,
				number:""
};
},
//计算属性
computed: {},
//方法集合
methods: {
	xgok(){
					let th=this
					this.$http.put("http://localhost:8080/c/user/xg", this.xguser).then(resp => {
						if(resp.data>0){
							this.$message({
								showClose: true,
								message: '信息修改成功',
								type: 'success'
							});
							th.dialogTableVisible=false
							th.ck()
						}else{
							this.$message.error('信息修改失败');
						}
						
					})
				},
	tjkh(){
			this.dialogFormVisible=true
			this.inclean();
			this.created();
			this.form.userno=this.number
			
		},
	modif(kh) {
		this.dialogTableVisible = true
		this.xguser=kh

				},
    ck() {
		let thiss = this;
		this.$http.get("http://localhost:8080/c/user/querall", {
		params: {
							usertj: thiss.usertj
						}
					}).then(resp => {
						console.info(resp.data)
						thiss.ckulist = resp.data
					})
				},
                ok() {
					if(this.form.username==""){
						this.$message.error('请填写客户名称');
					}else if(this.form.userphone==""){
						this.$message.error('请填写客户手机号');
					}else{
					this.dialogFormVisible = false
					let th = this
					this.$http.post("http://localhost:8080/c/user/add", this.form).then(resp => {
						if(resp.data > 0) {
							this.$message({
								showClose: true,
								message: '客户添加成功',
								type: 'success'
							});
						} else {
							this.$message.error('客户添加失败');

						}
						th.inclean();
						th.ck();
					})
					}
				},
				inclean() {
						this.form.userno = "",
						this.form.username = "",
						this.form.userphone = "",
						this.form.useraddress = "",
						this.form.uamount = "0",
						this.form.usercomment = "",
						this.form.uintegral = "0",
						this.form.isvip =0,
						this.form.userid = "0",
						this.form.armemberid = "0",
						this.form.arvehiclekm = "0",
						this.form.signupaddress = "株洲市石峰区九郎山4s店",
						this.form.usertime = ""
						
				},
				del(id) {
					let th = this
					this.$confirm('是否对客户进行删除？', '确认信息', {
							distinguishCancelAndClose: true,
							confirmButtonText: '删除',
							cancelButtonText: '放弃删除'
						})
						.then(() => {
							this.$http.delete("http://localhost:8080/c/user/remone", {
								params: {
									u: id
								}

							}).then(resp => {
								if(resp.data > 0) {
									this.$message({
										showClose: true,
										message: '客户删除成功',
										type: 'success'
									});
								} else {
									this.$message.error('客户删除失败');

								}
								th.ck();
							})

						})
						.catch(action => {
							this.$message({
								type: 'info',
								message: action === 'cancel' ?
									'放弃删除并离开页面' : '返回当前页面'
							})
						});
					//alert(id)

				},
				handleCurrentChange(val) {
					this.currentRow = val;
					//console.info(val)
					let th=this
					this.$http.get("http://localhost:8080/c/utba/byid", {
						params: {
							id: val.userid
						}
					}).then(resp => {
						console.info(resp.data)
						th.cerlist=resp.data
					})
				},


 created () {
  // 调用获取当前日期的方法加四位随机数  赋值表单中的项目编号
  this.number = this.getProjectNum() + Math.floor(Math.random() * 10000)  // 如果是6位或者8位随机数，相应的 *1000000或者 *100000000就行了
   console.info(this.number)
},

	// 获取当前日期的方法
	getProjectNum () {
      const projectTime = new Date() // 当前中国标准时间
      const Year = projectTime.getFullYear() // 获取当前年份 支持IE和火狐浏览器.
      const Month = projectTime.getMonth() + 1 // 获取中国区月份
      const Day = projectTime.getDate() // 获取几号
      var CurrentDate = String(Year) 
      if (Month >= 10) { // 判断月份和几号是否大于10或者小于10
        CurrentDate += Month
      } else {
        CurrentDate += '0' + Month
      }
      if (Day >= 10) {
        CurrentDate += Day
      } else {
        CurrentDate += '0' + Day
      }
      return CurrentDate
    }
},
//挂载完成（可以访问DOM元素）
mounted() {
    this.ck();
},
//监控data中的数据变化
watch: {

}
}
</script>
<style  scoped>
/*@import url(); 引入公共css类*/
.grid-content {
				border-radius: 4px;
				min-height: 36px;
			}
			
			.row-bg {
				padding: 10px 0;
			}
			
</style>